<template>  
	<view class="content">  
		<view class="avatarWrapper">  
			<view class="avatar">  
				<image class="img" src="/static/new_logo.jpg" mode="widthFix"></image>  
			</view>  
		</view>  
		<view class="form1">  
			<uni-forms ref="form" :modelValue="form" :rules="rules">  
				<view class="inputWrapper">  
					<uni-forms-item name="username">  
						<uni-easyinput class="input" v-model="form.username" prefixIcon="person" placeholder="请输入手机号"></uni-easyinput>  
					</uni-forms-item>  
				</view>  
				<view class="inputWrapper">  
				<!-- 密码 -->
					<uni-forms-item name="password">  
						<uni-easyinput class="input" type="password" v-model="form.password" prefixIcon="locked" placeholder="请输入密码"></uni-easyinput>  
					</uni-forms-item>  
				</view>  

				<!-- 调整此处 -->  
				<view class="inputWrapper">  
					<view class="captchaContainer">  
						<input class="yanzheng" v-model="graphicVerifyCode" placeholder="请输入验证码" />  
						<canvas style="width:200rpx;height:80rpx;background-color: #d4e4ff;" canvas-id="canvas" @click="updateImageCode"></canvas>  
					</view>  
				</view>  
			</uni-forms>  
			<view class="loginBtn" @click="submitFcha">  
				<button style="width: 350rpx;margin-top: 55px;border: 1rpx solid black;background-color: #FFC90E;box-shadow: 4rpx 4rpx 3rpx rgba(0, 0, 0, 0.3);" :loading="loading"  class="btn-big">登录</button>  
			</view>  

			<view class="extra-links">
				<text class="link" @tap="turnToForget">忘记密码</text>
				<text style="color: #666">|</text>
				<text class="link" @tap="zhuce">立即注册</text>
			</view>
		</view>
	</view>  
</template>  

<script>  
import setting from "../../setting";
import { Fcaptcha } from "/pages/fcaptcha.js"  
export default {  
  data() {  
    return {  
      loading: false,  
      graphicVerifyCode: "",  
      form: { username: '', password: '' },  // 存储用户名和密码  
	  errorMessage: '',
      // rules: {  
      //   username: {  
      //     rules: [{ required: true, errorMessage: '请输入手机号' }],  
      //     validateTrigger: 'blur'  
      //   },  
      // },  
    }  
  },  
  onReady() {  
    this.fcaptcha = new Fcaptcha({  
      el: 'canvas',  
      width: 80,  
      height: 35,  
      createCodeImg: ""  
    });  
  },  
  methods: {  
    updateImageCode() {  
      this.fcaptcha.refresh()  
    },  
    submitFcha() {  
      // 验证图形验证码是否输入
      if (!this.graphicVerifyCode) {  
        return uni.showToast({ icon: "none", title: '请输入图形验证码' })  
      }  

      // 验证图形验证码
      let validate = this.fcaptcha.validate(this.graphicVerifyCode)  
      if (!validate) {  
        this.updateImageCode();  
        return uni.showToast({ icon: "error", title: '图形验证码错误' })  
      } else {  
        uni.showToast({ title: '图形验证码通过' })  
        
        // 进行登录请求
        this.login();  
      }  
    },  
    login() {  
      const { username, password } = this.form;

      // 检查用户名和密码是否为空
      if (!username || !password) {
        return uni.showToast({ icon: "none", title: '手机号或密码不能为空' });
      }
	  const phoneRegex = /^\d{11}$/;
	  if (!phoneRegex.test(username)) {
        return uni.showToast({ icon: "none", title: '手机号必须为11位数字' });
	  }
	  this.errorMessage = '';
	  
	       // 密码复杂度验证（4-12位，仅允许字母或数字）
	       const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&,.]{4,12}$/;
	        if (!passwordRegex.test(password)) {
	            return uni.showToast({ 
	                icon: "none", 
	                title: '密码需4-12位，必须包含字母和数字' 
	            });
	            this.errorMessage = '密码需4-12位，必须包含字母和数字';
	            return;
	        }

      // 发送登录请求到后端
      this.loading = true;
      uni.request({
        url: setting.url+'/api/login',  // 后端登录接口 URL
        method: 'POST',
        data: {
          username: username,
          password: password,
        },
        success: (res) => {
          if (res.data.message === "登录成功") {  // 如果后端返回 "登录成功"
            uni.showToast({
              title: '登录成功',
            });
			  // 将 user_id 存储为全局变量
			    const userId = res.data.user.user_id;
			    uni.setStorageSync('user_id', userId);  // 存储 user_id 到本地存储
            uni.switchTab({
              url: '../Home/Home',  // 登录成功后跳转到首页
            });
          } else {
            uni.showToast({
              icon: 'error',
              title: res.data.message || '登录失败',
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            icon: 'error',
            title: '登录请求失败',
          });
        },
        complete: () => {
          this.loading = false;  // 请求结束，停止 loading
        }
      });
    },  
	turnToForget(){
		uni.navigateTo({
		  url: '/pages/forget/forget'  
		})  
	},
    zhuce() {  
      uni.navigateTo({  
        url: '/pages/register/register'  
      })  
    }  
  }  
}  
</script>  
 

<style>  
.content {  
	width: 100vw;  
	height: 100vh;  
	margin-top: 120px;
}  

.avatarWrapper {  
	height: 20vh;  
	width: 100vw;  
	display: flex;  
	justify-content: center;  
	align-items: flex-end;  
}  

.avatar {  
	width: 200upx;  
	height: 200upx;  
	overflow: hidden;  
}  

.avatar .img {  
	width: 100px; /* 原始大小 */
	  height: 100px; /* 原始大小 */
	  transform: scale(1.7); /* 放大2倍 */
	  transform-origin: center center; /* 从中心放大 */  
}  

.form1 {  
	padding: 0 100upx;  
	margin-top: 60px;  
	justify-content: center;  
}  

.inputWrapper {  
	width: 100%;  
	height: 70upx;  
	border-radius: 20px;  
	box-sizing: border-box;  
	padding: 0 20px;  
	margin-top: 25px;  
}  


.captchaContainer {  
	display: flex; /* 使用flex进行布局 */  
	align-items: center; /* 垂直居中对齐 */  
}  

.yanzheng {  
	background-color: white;  
	width: 60%;  
	height: 70upx;  
	text-align: center;  
	font-size: 14px;  
	border-radius: 5px;  
	margin-right: 10px;
	border:1rpx solid lightgrey;
}  

.inputWrapper .input {  
	width: 100%;  
	height: 100%;  
	text-align: center;  
	font-size: 16px;  
	padding: 0 0;
}  

.loginBtn .btnValue {  
	color: white;  
}  

.forgotBtn {  
	text-align: center;   
	font-size: 15px;  
	margin-top: 20px;  
	border: 1rpx solid black;
	background-color: #FFF200;
}  
.extra-links {
	margin-left: 75px;
  display: flex;
  /* justify-content: space-between; */
  margin-top: 15px;
}

.link {
  font-size: 15px; /* 调整字体大小 */
  color: #666; /* 调整字体颜色 */
  text-decoration: none; /* 去掉下划线 */
  cursor: pointer;
}

.link:hover {
  color: #FFC90E; /* 鼠标悬停时改变颜色 */
}
.spacer {  
	width: 10upx;   
}  
</style>